<script setup>
import { ref, onMounted, toRefs, watch } from 'vue'
import { store } from '@/js/store.js'
import { objextend } from '@/js/function.js'
import { config_default } from './config.js'
import modeUpimg from '@/components/mode-upimg.vue';

const props = defineProps({
    config: Object,
    active: String,
});
//需要响应式时使用toRefs
const { config } = toRefs(props);


const mergedObj = objextend(config_default(), config.value)
objextend(config.value, mergedObj)

const predefineColors = ref([
    '#666666',
    '#333333',
    '#000000',
    '#ffffff',
    '#f2f2f2',
    '#eeeeee',
    '#f2f7fa',
    '#006CBE',
    '#040E3B',
    '#AB0000'
])


const bgs = ref([{ url: config.value.bg }]);
watch(bgs, (newBgs) => {
    if (newBgs.length > 0) {
        config.value.bg = newBgs[0].url;
    }else{
        config.value.bg = ''
    }
  },
  { deep: true }
);

</script>

<template>

    <el-form :model="config" label-width="80px">
        <h1>修改：<input type="text" v-model="config.title" style="border-width: 0 0 1px 0;"></h1>
        <el-form-item label="宽度">
            <el-input type="number" v-model="config.width" :disabled="config.width_unit=='auto'" title="auto自适应可无需设置数值">
                <template #append>
                    <el-select v-model="config.width_unit" placeholder="单位" style="width: 80px">
                        <el-option label="px" value="px" />
                        <el-option label="%" value="%" />
                        <el-option label="auto" value="auto" />
                    </el-select>
                </template>
            </el-input>
        </el-form-item>
        <el-form-item label="高度">
            <el-input type="number" v-model="config.height" :disabled="config.height_unit=='auto'" title="auto自适应可无需设置数值">
                <template #append>
                    <el-select v-model="config.height_unit" placeholder="单位" style="width: 80px">
                        <el-option label="px" value="px" />
                        <el-option label="%" value="%" />
                        <el-option label="auto" value="auto" />
                    </el-select>
                </template>
            </el-input>
        </el-form-item>
        <el-form-item label="字号">
            <el-input-number type="number" v-model="config.fontSize"></el-input-number>
        </el-form-item>
        <el-form-item label="文字颜色">
            <el-color-picker v-model="config.color" :predefine="predefineColors" />
        </el-form-item>
        <el-form-item label="背景颜色">
            <el-color-picker v-model="config.backgroundColor" :predefine="predefineColors" show-alpha />
        </el-form-item>
        <el-form-item label="背景图">
            <mode-upimg :uplist="bgs" :action="store.api + store.uploadUrl" :maxnum="1" :options="{...store.upimgOptions}">
                <i></i>
                <template v-if="store.upimgOptions.online" v-slot:filepopup="modeParams">
                    <material :modeParams="modeParams" :xuanze="true" />
                </template>
            </mode-upimg>
        </el-form-item>
        <el-form-item label="圆角">
            <el-slider v-model="config.borderRadius" :max="200" />
        </el-form-item>
        <el-form-item label="边框颜色">
            <el-color-picker v-model="config.borderColor" />
        </el-form-item>
        <el-form-item label="边框粗度">
            <el-slider v-model="config.borderWidth" :max="150" />
        </el-form-item>
        <el-form-item label="外间距">
            <div class="boxcon">
                <p>上 <el-input-number size="small" style="width: 90px" v-model="config.marginTop" /></p>
                <p>右 <el-input-number size="small" style="width: 90px" v-model="config.marginRight" /></p>
                <p>下 <el-input-number size="small" style="width: 90px" v-model="config.marginBottom" /></p>
                <p><el-input-number size="small" style="width: 90px" v-model="config.marginLeft" /> 左</p>
            </div>
        </el-form-item>
        <el-form-item label="内间距">
            <div class="boxcon boxcon2">
                <p>上 <el-input-number size="small" style="width: 90px" v-model="config.paddingTop" /></p>
                <p><el-input-number size="small" style="width: 90px" v-model="config.paddingRight" /> 右</p>
                <p>下 <el-input-number size="small" style="width: 90px" v-model="config.paddingBottom" /></p>
                <p>左 <el-input-number size="small" style="width: 90px" v-model="config.paddingLeft" /></p>
            </div>
        </el-form-item>
        <!-- <el-form-item label="自定义项">
                <el-input type="text" v-model="config.define" />
            </el-form-item> -->
        <el-form-item label="备注">
            <el-input type="text" v-model="config.note" />
        </el-form-item>
    </el-form>


</template>

<style scoped>
.boxcon{
    position: relative; width: 60px;height: 60px; margin: 40px 90px;
    border: 2px solid #6db6f1; box-shadow: #eee 0px 0px 0 10px;
}
.boxcon p{position: absolute;white-space: nowrap;}
.boxcon p:nth-child(1){left: -30px;top: -40px;}
.boxcon p:nth-child(2){left: 105%;top: 20%;}
.boxcon p:nth-child(3){left: -30px;top: 105%;}
.boxcon p:nth-child(4){right: 105%;top: 20%;}

.boxcon2{
    width: 250px;height: 160px; margin: 10px auto;
    box-shadow: inset#eee 0px 0px 0 10px;
}
.boxcon2 p:nth-child(1){left: 60px;top: 10px;}
.boxcon2 p:nth-child(2){right: 10px;top: 40%; left: auto;}
.boxcon2 p:nth-child(3){left: 60px;bottom: 10px; top: auto;}
.boxcon2 p:nth-child(4){left: 10px;top: 40%; right: auto;}

</style>